<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
    <style rel="stylesheet" type="text/css">
      .inner {
        width: 500px;
        height: 300px;
        background-color: pink;
        float: left;
        /* line-height: 300px; */
        text-align: center;
      }
      .inner ul {
        list-style: none;
      }
      .inner li{
        float: left;
        margin: 5px;
        padding: 10px;
        border: 1px solid palegreen;
        background-color: powderblue;
      }
      .btnList{
        float: right;
        height: 300px;
        width: 500px;
        /* line-height: 300px; */
        text-align: center;
        padding: 30px;
        box-sizing: border-box;
        background-color:palegreen;
      }
      .btnList button{
        margin: 5px;
      }

    </style>
		<script type="text/javascript">
		
			window.onload = function() {
        function myClick (idStr, fun) {
          var idStr = document.getElementById(idStr)
          idStr.onclick = fun;
        }
        function commonUse () {
          var bj = document.getElementById('bj')
          // 创建一个广州
          var li = document.createElement('li')
          var guangzhou = document.createTextNode('广州')
          li.appendChild(guangzhou)
          var city = document.getElementById('city')
        }
        //创建一个"广州"节点,添加到#city下
        	//创建li元素节点
					/*
					 * document.createElement()
					 * 	可以用于创建一个元素节点对象，
					 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
					 * 	并将创建好的对象作为返回值返回
					 */
          myClick('btn01', function() {
            var li = document.createElement('li')
            //创建广州文本节点
					/*
					 * document.createTextNode()
					 * 	可以用来创建一个文本节点对象
					 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
					 */
          var guangzhou = document.createTextNode('广州')
          	//将gzText设置li的子节点
					/*
					 * appendChild()
					 * 	 - 向一个父节点中添加一个新的子节点
					 * 	 - 用法：父节点.appendChild(子节点);
					 */
          li.appendChild(guangzhou)
          //获取id为city的节点
          var city = document.getElementById('city')
          //将广州添加到city下
          city.appendChild(li)

          });

          //将"广州"节点插入到#bj前面
          myClick('btn02', function() {
              var bj = document.getElementById('bj')
              // 创建一个广州
              var li = document.createElement('li')
              var guangzhou = document.createTextNode('广州')
              li.appendChild(guangzhou)
              var city = document.getElementById('city')
                        /*
            * insertBefore()
            * 	- 可以在指定的子节点前插入新的子节点
            *  - 语法：
            * 		父节点.insertBefore(新节点,旧节点);
            */
             city.insertBefore(li,bj)
          });

          //使用"广州"节点替换#bj节点
          myClick('btn03',function() {
            var bj = document.getElementById('bj')
              // 创建一个广州
              var li = document.createElement('li')
              var guangzhou = document.createTextNode('广州')
              li.appendChild(guangzhou)
              var city = document.getElementById('city')
              /*
					 * replaceChild()
					 * 	- 可以使用指定的子节点替换已有的子节点
					 * 	- 语法：父节点.replaceChild(新节点,旧节点);
					 */
          city.replaceChild(li,bj)
          });

            //删除#bj节点
            myClick('btn04',function() {
              var bj = document.getElementById("bj");
              //获取city
              var city = document.getElementById("city");
              
              /*
              * removeChild()
              * 	- 可以删除一个子节点
              * 	- 语法：父节点.removeChild(子节点);
              * 		
              * 		子节点.parentNode.removeChild(子节点);
              */
            //  city.removeChild(bj)
             bj.parentNode.removeChild(bj)
            });

            //读取#city内的HTML代码
            myClick("btn05",function(){
              //获取city
              var city = document.getElementById("city");
              
              alert(city.innerHTML);
            });

            	//设置#bj内的HTML代码
            myClick("btn06" , function(){
              //获取bj
              var bj = document.getElementById("bj");
              bj.innerHTML = "昌平";
            });

            myClick("btn07",function(){
                
                //向city中添加广州
                var city = document.getElementById("city");
                
                /*
                * 使用innerHTML也可以完成DOM的增删改的相关操作
                * 一般我们会两种方式结合使用
                */
                //city.innerHTML += "<li>广州</li>";
                
                //创建一个li
                var li = document.createElement("li");
                //向li中设置文本
                li.innerHTML = "广州";
                //将li添加到city中
                city.appendChild(li);
                
              });

      }
			
		
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList" class="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>
